<template>
  <section>
    <area-layout @TreeSelect="handlerTreeSelect">
      <template slot="title">
        <span class="title">
          {{ $route.meta.title }}
        </span>
        <!-- <a-button-group style="margin-right: 20px"> -->
        <a-button-group class="button-group">
          <span class="button-group-title">批量建库:</span>
          <a-button
            type="link"
            @click="handlerSelectImport"
            style="margin-right: 20px"
            :disabled="!currentAreaId"
            >[导入基础数据]</a-button
          >
        </a-button-group>
        <!-- <a-button
            type="primary"
            icon="cloud-upload"
            disabled
            @click="$refs.MemberImport.handlerUploadExecl()"
          >导入模板表格更新现有农户数据</a-button>
          <a-button
            type="default"
            icon="download"
            disabled
            @click="handlerDownload($downloadRoot + '种粮一次补贴基础数据模板.xlsx')"
          >
            下载模板
          </a-button> -->
        <!-- 
          <span class="button-group-title"> 批量建库导入基础数据： </span>
          <a-popconfirm
            title="您确认要将本年耕地补贴数据导入?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handlerSyncData"
          >
            <a-button
              type="link"
              :disabled="!currentAreaId"
              :loading="syncLoading"
              >[从指定区域本年耕补数据增量导入]</a-button
            >
          </a-popconfirm>

          <a-popconfirm
            title="您确认要将本年首次一次补导入基础数据导入?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handlerSyncFirstData(1)"
          >
            <a-button
              type="link"
              v-if="
                (isSecondPlant || isThirdPlant) &&
                currentAuth('crop-member.import-first')
              "
              :loading="syncLoading"
              >[从本年首次一次补导入]</a-button
            >
          </a-popconfirm>

          <a-popconfirm
            title="您确认要将本年第二次补导入基础数据导入?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handlerSyncFirstData(2)"
          >
            <a-button
              type="link"
              v-if="isThirdPlant && currentAuth('crop-member.import-second')"
              :loading="syncLoading"
              >[从本年第2次一次补导入]</a-button
            >
          </a-popconfirm>

          <a-popconfirm
            title="您确认要将下年耕补数据导入?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handlerSyncData(true)"
          >
            <a-button
              type="link"
              v-if="isThirdPlant && currentAuth('crop-member.import-second')"
              :loading="syncLoading"
              >[从下年耕补数据导入]</a-button
            >
          </a-popconfirm> -->
        <!-- </a-button-group> -->

        <a-button-group class="button-group">
          <span class="button-group-title">一卡通账号:</span>
          <a-button
            type="link"
            :auth="{
              keys: ['crop-member.import-ykt', !!currentAreaId],
              relate: 'and',
            }"
            :loading="syncLoading"
            @click="$refs.MemberYKTAccountImport.handlerUploadExecl()"
            >导入一卡通账号</a-button
          >
          <a-button
            type="link"
            :loading="syncLoading"
            @click="
              handlerDownload($downloadRoot + '耕保补贴一卡通账号明细表.xls')
            "
            >[模板]</a-button
          >
          <a-button
            style="margin-right: 10px"
            :auth="{
              keys: ['crop-member.import-ykt', !!currentAreaId],
              relate: 'and',
            }"
            type="link"
            showDefaultLabel
            @click="
              handlerUploadProcess(
                isThirdPlant
                  ? 'crop_account3'
                  : isSecondPlant
                  ? 'crop_account2'
                  : isPlant
                  ? 'crop_account1'
                  : '',
                '导入一卡通账号'
              )
            "
          >
            [查看]
          </a-button>
        </a-button-group>

        <a-button
          type="link"
          style="margin: 0 20px"
          :disabled="!currentAreaId"
          showDefaultLabel
          @click="handlerUploadProcess()"
        >
          [查看批量导入数据修改进度]
        </a-button>
        <a-button type="link" icon="question-circle" @click="handlerHelper">
          帮助
        </a-button>
      </template>

      <template slot-scope="row">
        <template v-if="row.currentAreaId">
          <section class="roster-container">
            <!-- 模式切换 -->
            <section class="mode-select" v-if="row.currentAreaId.length">
              显示模式：
              <a-radio-group v-model="currentMode">
                <a-radio value="1"> 统计表 </a-radio>
                <a-radio value="2"> 明细表 </a-radio>
              </a-radio-group>
            </section>

            <Statistics
              ref="Statistics"
              :currentAreaId="row.currentAreaId"
              v-if="currentMode === '1'"
            />
            <template v-else>
              <MemberList
                ref="MemberList"
                :currentAreaId="row.currentAreaId"
                :currentAreaName="currentAreaName"
              />
            </template>
          </section>
        </template>
      </template>
    </area-layout>

    <MemberImport ref="MemberImport" :currentAreaId="currentAreaId" />
    <MemberYKTAccountImport
      ref="MemberYKTAccountImport"
      :currentAreaId="currentAreaId"
    />
    <SelectImport
      ref="SelectImport"
      :currentAreaId="currentAreaId"
      :currentAreaName="currentAreaName"
      @syncSuccess="handlerSyncSuccess"
    />
  </section>
</template>

<script lang="ts">
// 演示如何使用 this.$dialog 封装 modal 组件
import {
  Mixins,
  Component,
  Watch,
  Vue,
  Prop,
  Provide,
} from 'vue-property-decorator'
import EventsMixin from '@/mixin/events'

import AreaTree from '@/components/src/AreaTree'
import AreaLayout from '@/layouts/AreaLayout.vue'
import MemberList from './MemberList.vue'
import Statistics from './Statistics.vue'
import SelectImport from './SelectImport.vue'
import { userModule, PROJECT_IDS } from '@/store/modules/user'
import MemberImport from './MemberImport.vue'
import { cropMemberServices } from '@/common/services/crop-member'
import UploadProcess from '../../fund-release/list/UploadProcess.vue'
import MemberYKTAccountImport from '../farmers/MemberYKTAccountImport.vue'

@Component({
  components: {
    AreaTree,
    AreaLayout,
    MemberList,
    Statistics,
    MemberImport,
    UploadProcess,
    MemberYKTAccountImport,
    SelectImport,
  },
})
export default class Farmers extends Mixins(EventsMixin) {
  public $refs: any

  public data = []
  public currentAreaId = ''

  @Provide()
  public currentAreaName = ''

  public currentMode = '1'

  get isLarge() {
    return userModule.isLarge
  }
  get currentUserArea() {
    return userModule.currentUserArea
  }

  get isPlant() {
    return userModule.isPlant
  }

  get isSecondPlant() {
    return userModule.isSecondPlant
  }

  get isThirdPlant() {
    return userModule.isThirdPlant
  }

  public handlerTreeSelect(data: any) {
    // 社级直接默认明细
    if (data.s_a_id.length === 14) {
      this.currentMode = '2'
    } else {
      // this.currentMode = '1'
    }
    this.currentAreaId = data.s_a_id
    this.currentAreaName = data.s_a_nam
  }

  public handlerHelper() {
    this.events.trigger('show-helper')
  }

  public handlerUploadExecl() {
    this.$refs.MemberImport.handlerUploadExecl(true)
  }

  public currentAuth(auth: string) {
    let auths: string[] = []
    if (Array.isArray(auth)) {
      auths = auth
    } else if (auth) {
      auths = [auth]
    }
    if (auths.length === 0) return true
    // @ts-ignore
    return this.$route?.meta.permission.find((item) =>
      auths.includes(item.value)
    )
  }

  // 选择导入源
  public handlerSelectImport() {
    this.$refs.SelectImport.show()
  }

  public handlerSyncSuccess() {
    //
    this.currentMode === '1'
      ? this.$refs.Statistics.getData()
      : this.$refs.MemberList.getData()
  }

  // 下载
  public handlerDownload(link: string) {
    const a = document.createElement('a')
    a.href = link
    a.target = '_blank'
    a.click()
  }

  // 同步上一年数据
  public syncLoading = false
  public handlerSyncData(next: boolean) {
    const loading = this.$message.loading({
      content: '数据正在同步中。。。请稍后',
    })
    this.syncLoading = true
    cropMemberServices
      .syncThisYearData({
        s_a_id: this.currentAreaId,
        target: next ? `${userModule.currentYear + 1}` : undefined,
      })
      .then((_) => {
        this.$message.success('同步成功')
      })
      .finally(() => {
        loading()
        this.syncLoading = false
      })
  }

  public handlerSyncFirstData(step: number, year?: number) {
    const loading = this.$message.loading({
      content: '数据正在同步中。。。请稍后',
    })
    this.syncLoading = true
    cropMemberServices
      .syncThisYearFirstData({
        s_a_id: this.currentAreaId,
        target:
          step === 1
            ? PROJECT_IDS.FIRST
            : step === 2
            ? PROJECT_IDS.SECOND
            : undefined,
      })
      .then((_) => {
        this.$message.success('同步成功')
      })
      .finally(() => {
        loading()
        this.syncLoading = false
      })
  }

  public handlerUploadProcess(
    type: string = 'crop',
    title: string = '查询一次性补贴数据上传进度'
  ) {
    console.log('type', type)
    this.$dialog(
      UploadProcess,
      {
        currentAreaId: this.currentAreaId,
        type: type,
      },
      {
        title: title,
        width: 1000,
      }
    )
  }
}
</script>

<style lang="less" scoped>
.member-container {
  display: flex;
  .area-tree {
    width: 300px;
    flex: none;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
.member-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.roster-container {
  // position: relative;
}
.mode-select {
  position: absolute;
  right: 20px;
  top: 16px;
  z-index: 33;
}
.title {
  margin-right: 40px;
  font-weight: bold;
  display: inline-block;
  width: 220px;
}
.button-group {
  align-items: center;
  .button-group-title {
    font-size: 14px;
    // font-weight: bold;
    line-height: 32px;
  }
  // button {
  //   transition: all 0.4s;
  // }
  // button:hover {
  //   font-weight: bold;
  //   font-size: 16px;
  // }
}
</style>
